.apps {
	$app-width: 84px;
	z-index: 1;
	ul {
		display: flex;
		place-items: start;
		gap: 8px;
		flex-direction: column;
		height: 100%;
		flex-wrap: wrap;
		place-content: start;
	}

	li {
		height: fit-content;
		width: $app-width;
		border: 1px solid transparent;
		text-align: center;
		padding: 4px 0;
		cursor: pointer;
		user-select: none;
		border-radius: var(--radius);

		&:hover {
			background: var(--hover-bg);
		}
		.logo {
			padding: 2px 0;
			width: 100%;
			height: 42px;
			img {
				width: 32px;
				height: 32px;
			}
		}
		.title {
			line-height: 16px;
			overflow: hidden;
			text-shadow: 0px 0px 2px #2c2c2c;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 100%;
			padding: 0 4px;
			color: white;
		}
	}
	li.selected {
		background: rgba(142, 167, 202, 0.3);
	}
}
